<template>
	<view class="content" :style="theme">
		<view class="cont">
			<view class="head">
				<image :src="model1.showAvatar ? model1.showAvatar: model1.sex == 2 ? imgHost+'/img_girl.png' : imgHost+'/img_boy.png'" class="touxian"></image>
				<view style="width: 166rpx;" @click="uploadimg">录入人脸照片</view>
			</view>
			<view class="formLable"><text>*</text>姓名：</view>
			<view class="formCnt">
				<u--input placeholder="请输入真实姓名" border="none" v-model="model1.name" maxlength="20"
					fontSize="30rpx" />
			</view>
			<view class="formLable mt30"><text>*</text>性别：</view>
			<view class="formCnt">
				<view class="sex flex">
					<view v-for="(item, index) in sexList" :key="index" :class="model1.sex== item.value?'on':''"
						@click="sexBtn(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="formLable mt30">出生日期：</view>
			<view class="formCnt">
				<view style="flex: 1;" @click="xzDate"><u--input placeholder="请选择出生日期" border="none"
						v-model="model1.birthday" readonly fontSize="30rpx" /></view>
				<view class="right flex">
					<u-icon v-if="model1.birthday" name="close" size="30rpx" color="#999" @click="qkDate"></u-icon>
					<u-icon v-else name="arrow-right" size="30rpx" color="#999" @click="xzDate"></u-icon>
				</view>
			</view>
			<view class="formLable mt30">身份证号：</view>
			<view class="formCnt">
				<u--input placeholder="请输入身份证号码" type="idcard" border="none" v-model="model1.idCard" maxlength="18"
					fontSize="30rpx" />
			</view>
			<view class="tips flex-c mt20">
				*为顺利报名，请确保录入的姓名与证件上保持一致，演示场馆将通过加密方式保护您录入的身份信息
			</view>
		</view>
		<view class="box_footer">
			<view class="box_footer_agree">
				<view class="checkboxBoxD" @click="isTy">
					<view class="checkboxBox" :class="isActive?'on':''"><u-icon v-if="isActive"
							name="checkmark-circle-fill" size="44rpx"></u-icon></view>
				</view>
				<view>我已阅读并同意<text @click='open'>《隐私协议》</text></view>
			</view>
			<view class="footBtn" @click="$noMultipleClicks(submit)">提交</view>
		</view>
		<u-popup :show="agreement" @close="closeBtn" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">温馨提示</view>
				<view class="agreement_cnt">
					请先阅读并同意<text @click="open">《隐私协议》</text>
				</view>
				<view class="agreement_btns flex">
					<view @click="closeBtn">我再想想</view>
					<view class="agreement_qrBtn" @click="qrBtn">同意</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" :minDate="minDate" :maxDate="maxDate"
			mode="date" :formatter="formatter" @cancel="cancel" @confirm="confirm">></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				noClick: true,
				model1: {
					sex: '1'
				},
				value1: Number(new Date()),
				minDate: new Date('1920/01/01').getTime(),
				maxDate: Number(new Date()),
				show: false,
				isActive: false,
				sexList: [{
					name: '男',
					value: 1
				}, {
					name: '女',
					value: 2
				}, {
					name: '保密',
					value: 0
				}],
				agreement: false
			}
		},
		onLoad(ops) {
			if (ops.id) {
				uni.setNavigationBarTitle({
					title: '编辑人员'
				})
				this.model1 = {
					name: ops.xyname,
					idCard: ops.idCard && ops.idCard != 'undefined' ? ops.idCard : '',
					birthday: ops.birthday && ops.birthday != 'undefined' ? ops.birthday : '',
					id: ops.id,
					avatar: ops.avatar && ops.avatar != 'undefined' ? ops.avatar : '',
					showAvatar: ops.showAvatar && ops.showAvatar != 'undefined' ? ops.showAvatar : '',
					sex: ops.sex && ops.sex != 'undefined' ? ops.sex : 0,
				}
				if (ops.currentDate) {
					this.value1 = Number(ops.currentDate)
				}
			} else {
				uni.setNavigationBarTitle({
					title: '添加人员'
				})
			}
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			uploadimg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						that.$app.showLoading('上传中，请稍后...')
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.getImageInfo({
							src: tempFilePaths[0],
							success: (image) => {
								uni.uploadFile({
									url: that.$app.baseUrls,
									filePath: image.path,
									fileType: 'image',
									formData: {
										folder: 'MEMBER_IMG',
										type: ''
									},
									header: {
										// #ifdef MP
										Cookie: uni.getStorageSync('cookie'),
										'content-type': 'application/json',
										// #endif
										// #ifdef H5
										platform: '3',
										token: uni.getStorageSync('token'),
										// #endif
										shopId: that.$store.state.shopId,
										gymId: that.venueId
									},
									name: 'file',
									success: (uploadFileRes) => {
										that.$app.closeLoading()
										if (uploadFileRes.statusCode == 413) {
											that.$app.showToast('图片太大')
										} else if (uploadFileRes.statusCode == 200 &&
											uploadFileRes.data) {
											that.$set(that.model1, 'showAvatar', JSON
												.parse(
													uploadFileRes
													.data).showUrl)
											that.$set(that.model1, 'avatar', JSON
												.parse(
													uploadFileRes
													.data).insertUrl)
										} else {
											that.$app.showToast('上传失败')
										}
									},
									fail: (err) => {
										that.$app.closeLoading()
										console.log('err', err);
									},
								});
							},
						});
					}
					
				});
			},
			closeBtn() {
				this.agreement = false
			},
			open() {
				this.jump('/pages/home/meal?type=15&code=AGREEMENT_USER&title=', '隐私协议')
			},
			isTy() {
				this.isActive = !this.isActive
			},
			xzDate() {
				this.show = true
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				this.$set(this.model1, 'birthday', this.formatDate(e.value))
			},
			sexBtn(e) {
				this.$set(this.model1, 'sex', e.value)
			},
			qkDate() {
				this.$set(this.model1, 'birthday', '')
			},
			qrBtn() {
				this.isActive = true
				this.agreement = false
				this.submit()
			},
			submit() {
				if (!this.isActive) {
					return this.agreement = true
				}
				if (!this.model1.name) {
					this.$app.showToast('请输入姓名')
					return false
				}
				// if (!this.model1.birthday) {
				// 	this.$app.showToast('请选择出生日期')
				// 	return false
				// }
				// if (!this.model1.idCard) {
				// 	this.$app.showToast('请输入身份证号')
				// 	return false
				// }
				if (this.model1.idCard && this.model1.idCard.length != 18) {
					this.$app.showToast('请输入正确身份证号')
					return false
				}
				let param = {
					...this.model1
				}
				this.$app.ajax({
					data: {
						userId: this.userInfo.id,
						param
					},
					api: this.$api.studentAdd()
				}).then((res) => {
					if (res.errorCode == '000000') {
						if (this.model1.id) {
							this.$app.showToast('编辑成功')
						} else {
							this.$app.showToast('添加成功')
						}
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				}).catch(() => {})
			},
			calculation(s) {
				return s < 10 ? '0' + s : s
			},
			formatDate(date) {
				var date = new Date(date)
				const year = date.getFullYear() + '-'
				const month = this.calculation(date.getMonth() + 1) + '-'
				const day = this.calculation(date.getDate())
				return year + month + day
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			}

		}

	}
</script>

<style scoped lang="scss">
	.content {
		padding-bottom: 230rpx;
	}

	.cont {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		box-sizing: border-box;
		margin: 20rpx 30rpx;
		padding: 40rpx 30rpx;

		.head {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 40rpx;

			view {
				width: 136rpx;
				line-height: 48rpx;
				text-align: center;
				border-radius: 32rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: $color;
				border: 1px solid $color;
			}

			.touxian {
				width: 152rpx;
				height: 152rpx;
				border-radius: 50%;
				margin: 20rpx 0;
			}
		}

		.formLable {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #222222;

			text {
				color: $red;
			}
		}

		.formCnt {
			border-bottom: 1rpx solid #E5E5E5;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 20rpx 0 24rpx;

			.sex {
				view {
					width: 108rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #F7F7F7;
					border-radius: 32rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-right: 20rpx;

					&.on {
						background: $color;
						color: #fff;
					}
				}
			}
		}
	}

	.tips {
		color: $red;
		font-size: 24rpx;
		line-height: 1.5;
	}

	.box_footer {
		position: fixed;
		background: $bjColor;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10rpx 30rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		z-index: 99;

		.box_footer_agree {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			text {
				color: #333333;
				font-size: 26rpx;
				margin-left: 5rpx;
				color: $color;
			}
		}
	}
</style>